<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="delAllSelection"
          >新增石料基础设置</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="id"
          label="石料ID"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column prop="stonecode" label="石料编码"></el-table-column>
        <el-table-column prop="name" label="石料名称"></el-table-column>
        <el-table-column prop="unit" label="石料单位"></el-table-column>
        <el-table-column prop="colour" label="石料颜色"></el-table-column>
        <el-table-column prop="price" label="石料价格"></el-table-column>
        <el-table-column prop="si" label="石料净度"></el-table-column>
        <el-table-column prop="cut" label="石料切工"></el-table-column>
        <el-table-column prop="fire" label="石料火彩"></el-table-column>
        <el-table-column prop="shape" label="石料形状"></el-table-column>
        <el-table-column prop="description" label="石料描述"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="修改编辑" :visible.sync="editVisible" width="60%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-form-item label="石料id">
          <el-input v-model="form.id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="石料编码">
          <el-input v-model="form.stonecode" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="石料名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="石料单位">
          <el-input v-model="form.unit"></el-input>
        </el-form-item>
        <el-form-item label="石料颜色">
          <el-input v-model="form.colour"></el-input>
        </el-form-item>
        <el-form-item label="石料价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="石料净度">
          <el-input v-model="form.si"></el-input>
        </el-form-item>
        <el-form-item label="石料切工">
          <el-input v-model="form.cut"></el-input>
        </el-form-item>
        <el-form-item label="石料火彩">
          <el-input v-model="form.fire"></el-input>
        </el-form-item>
        <el-form-item label="石料形状">
          <el-input v-model="form.shape"></el-input>
        </el-form-item>
        <el-form-item label="石料描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增框弹出-->
    <el-dialog title="新增编辑" :visible.sync="addVisible" width="60%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-form-item label="石料编码">
          <el-input v-model="form.stonecode"></el-input>
        </el-form-item>
        <el-form-item label="石料名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="石料单位">
          <el-input v-model="form.unit"></el-input>
        </el-form-item>
        <el-form-item label="石料颜色">
          <el-input v-model="form.colour"></el-input>
        </el-form-item>
        <el-form-item label="石料价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="石料净度">
          <el-input v-model="form.si"></el-input>
        </el-form-item>
        <el-form-item label="石料切工">
          <el-input v-model="form.cut"></el-input>
        </el-form-item>
        <el-form-item label="石料火彩">
          <el-input v-model="form.fire"></el-input>
        </el-form-item>
        <el-form-item label="石料形状">
          <el-input v-model="form.shape"></el-input>
        </el-form-item>
        <el-form-item label="石料描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "shiliao",
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 4
      },
      ab: null,
      addVisible: false,
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      list1: [],
      rules: {
        price: [
          {
            required: true,
            type: "number",
            trigger: "blur",
            message: "请输入数字类型"
          }
        ]
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData: function() {
      this.$axios
        .get(this.$api.shiliao.findall, {
          params: {
            pageNum: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(response => {
          var result = response.data.data.list;
          console.log(response);
          this.$set(this.$data, "tableData", result);
          this.pageTotal = response.data.data.total || 50;
          var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize);
          if (totalPage2 < this.query.pageIndex) {
            this.query.pageIndex = totalPage2;
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    /*    getnewlist(){
      for(var i=0;i<this.tableData.length;i++){
        this.ab = this.tableData[i].description
        this.tableData[i].cc = this.stu[this.ab]
      }
      console.log(this.tableData)
      console.log(this.ab)
    },*/
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$axios
            .get(this.$api.shiliao.delete, {
              params: {
                id: row.id
              }
            })
            .then(response => {
              this.$message.success(response.data.msg);
              this.getData();
            })
            .catch(err => {
              console.log(err);
              this.$alert("请求出错");
            });
        })
        .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      this.addVisible = true;
    },
    // 编辑操作
    handleEdit(index, row) {
      this.editVisible = true;
      this.idx = index;
      this.form = { ...row };
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      console.log(this.form);
      this.$axios
        .post(this.$api.shiliao.update, JSON.stringify(this.form), {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res);
          this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          this.getData();
        });
      this.form = {};
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    addEdit() {
      this.addVisible = false;
      this.$axios
        .post(this.$api.shiliao.insert, JSON.stringify(this.form), {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.getData();
        });
      this.form = {};
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
